<template>
  <el-dialog v-model="dialogVisible" :title="winTitle" :close-on-click-modal="false" append-to-body width="800"
    class="editDialog" align-center>

    <el-form inline class="basicForm" label-position="right" :model="formData" ref="formRef" :rules="rules"
      label-width="120px">
      <el-form-item label="断面编码" style="width: 98%;" prop="taskName" required>
        <el-input v-model="formData.taskName" placeholder="请输入断面编码"></el-input>
      </el-form-item>
      <el-form-item label="线路ID" style="width: 98%;">
        <el-input v-model="formData.taskDesc" placeholder="请输入线路ID"></el-input>
      </el-form-item>
      <br />
      <el-form-item label="上/下行" style="width: 98%;" prop="taskSeq">
        <el-select v-model="formData.taskSeq" placeholder="请选择上/下行">
          <el-option v-for="item in taskSeqList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <br />
      <el-form-item label="是否开启同步" style="width: 98%;" prop="isPush">
        <el-select v-model="formData.isPush">
          <el-option v-for="item in ynList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <br />

      <el-form-item label="同步时间" style="width: 98%;" prop="pushTimeRange">
        <el-input v-model="formData.pushTimeRange" placeholder="请输入同步时间"></el-input>
      </el-form-item>
      <br />
      <el-form-item label="备注" style="width: 98%;" prop="remark">
        <el-input v-model="formData.remark" type="textarea"></el-input>
      </el-form-item>

      <el-divider style="width: 98%;"> 其他配置 </el-divider>
      <el-form-item style="width: 98%;">
        <p>每次保存的数据从触发时间点之前<el-input style="width: 80px;" v-model="formData.prepadTime"></el-input> s开始，循环<el-input
            style="width: 80px;" v-model="formData.cycleCount"></el-input>
          次；</p>
        <p>前一次采集结束到下一次准备开始之前间隔 <el-input style="width: 120px;" v-model="formData.sleepInterval"> </el-input>s；</p>
        <p> 触发通道<el-input style="width: 80px;" v-model="formData.channelNumber"></el-input>号，数值 <el-select
            v-model="formData.compareOperator" style="width: 60px;text-indent:0;">
            <el-option v-for="item in compareList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-input style="width: 80px;" v-model="formData.channelThreshold"></el-input> 之后开始触发保存数据；
        </p>
        <p>保存从触发开始时间往后<el-input style="width: 120px;" v-model="formData.timeoutSeconds"></el-input> s的数据；</p>

      </el-form-item>
    </el-form>


    <template #footer>
      <el-button @click="dialogVisible = false" auto-insert-space>取消</el-button>
      <el-button type="primary" @click="onConfirm" auto-insert-space>确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, reactive } from "vue";

import { ElMessage } from "element-plus";

import { clienttaskSave } from "@/utils/requests";

let dialogVisible = ref(false);

// eslint-disable-next-line no-undef,no-unused-vars
const emits = defineEmits(["confirm"]);

const taskSeqList = ref([
  { label: "上行", value: 1 },
  { label: "下行", value: 2 }
]);

const ynList = ref([
  { label: "是", value: 1 },
  { label: "否", value: 0 }
]);

const compareList = ref([
  { label: ">", value: ">" },
  { label: ">=", value: ">=" },
  { label: "<", value: "<" },
  { label: "<=", value: "<=" },
  { label: "=", value: "=" }
])

let winTitle = ref("");

// 规则：trigger 千万别省
const rules = reactive({
  taskName: [
    { required: true, message: '请输入断面编码', trigger: 'blur' }   // trigger 必写
  ],
})

let formRef = ref();

/* 1. 初始值常量 */
const initialForm = () => ({
  taskName: '',
  taskDesc: '',
  taskSeq: null,
  isPush: 0,
  pushTimeRange: '00:00:00-23:59:59',
  prepadTime: 5,
  cycleCount: 10000,
  sleepInterval: 30,
  channelNumber: 0,
  channelThreshold: 80,
  compareOperator: ">",
  timeoutSeconds: 20,
  id: null,
  remark: ''
})


let formData = reactive(initialForm());

let isEdit = ref(false);

const openDialog = (rowData) => {
  dialogVisible.value = true;

  if (!rowData) {
    winTitle.value = "新增"; 

    Object.keys(formData).forEach(k => delete formData[k]);

    Object.assign(formData, initialForm());

    isEdit.value = false;
  } else {
    winTitle.value = "修改";

    Object.assign(formData, rowData);

    isEdit.value = true;
  }
};

const onConfirm = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      clienttaskSave({ ...formData }).then((data) => {
        if (data) {
          emits("confirm");
          ElMessage.success("保存成功");
          dialogVisible.value = false;
        } else {
          ElMessage.error("保存失败");
        }
      });
    } else {
      const firstMsg = Object.keys(fields)
        .map(k => fields[k][0]?.message)
        .find(Boolean)

      ElMessage.error(firstMsg)

      return false;
    }
  });

};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.basicForm,
.selectionForm {
  >* {
    width: calc(50% - 20px);
    margin-right: 20px;

    .selectInput {
      flex: 1;
    }

    :deep(.el-date-editor) {
      width: 100%;
    }
  }

  >.long {
    width: calc(100% - 20px);
    margin-right: 20px;
  }

  .sumUnit {
    .text {
      margin-right: 10px;
    }
  }
}

p {
  text-indent: 4em;
  line-height: 1.2;
  /* 行高 */
  margin: 0 0 1em 0;
  /* 段间距 */
}
</style>
